import React, { Component } from 'react';
import $ from 'jquery';
import '../styles/App.css';
import '../iconfont/iconfont.css';
import TableStar from './tablestar';
import Header from './header';
import {HashRouter as Router,Route,Link} from 'react-router-dom';
import Xingzuo from "./xingzuo";
import Faxian from "./faxian";
import Starnews from "./starnews";
import Personal from "./personal";

const RouteTab = (route) => (
  <Route path={route.path} render={props => (
    // 把自路由向下传递来达到嵌套。
    <route.component {...props} routes={route.routes}/>
  )}/>
)

class Main extends Component{
  render(){
    var routes = this.props.routes;
    return (<div className="App">
      <div className="Header">
        <Header/>
      </div>
      <div className='sectionContent'>
        {routes.map((route, i) => (
          <RouteTab key={i} {...route}/>
        ))}
      </div>

      <div className="Footer">
            <div className="footerContent">
              <Link to="/main/xingzuo" className="tabItem">
              	<dl className="ittest"><dt><i className="iconfont icon-star01"></i></dt><dd>星座</dd></dl>
              </Link>
              <Link to="/main/faxian" className="tabItem">
              	<dl className="ittest"><dt><i className="iconfont icon-discover"></i></dt><dd>发现</dd></dl>
              </Link>
              <Link to="/main/starnews" className="tabItem">
              	<dl className="ittest"><dt><i className="iconfont icon-xinwen"></i></dt><dd>星闻</dd></dl>
              </Link>
              <Link to="/main/personal" className="tabItem">
              	<dl className="ittest"><dt><i className="iconfont icon-wode"></i></dt><dd>我的</dd></dl> 
              </Link>
            </div>
        
      </div>
    </div>)
  }
  
}
export default Main;
